<template>
<!-- 首页 -->
  <div>
    <div class='headers'>
    <Navbar bgccolor=''/>
  <van-swipe class="my-swipe" :autoplay="1000" indicator-color="white" >
  <van-swipe-item v-for='item in banners' :key='item.id'>
    <van-image
  width="100%"
  height="5rem"
  fit="fill"
  :src="'http://liufusong.top:8080'+item.imgSrc"
/>

  </van-swipe-item>
  </van-swipe>
    </div>
    </div>
</template>

<script>

import { Banners } from '@/api'
import Navbar from '@/views/Navbar'
export default {
  data () {
    return {
      banners: []
    }
  },
  components: { Navbar },
  async created () {
    const res = await Banners()
    this.banners = res.data.body
    this.banners.forEach((item) => {
    }
    )
  }
}
</script>

<style lang='less' scoped>

  .my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    background-color: #39a9ed;
  }
</style>
